<script setup lang='ts'>

import NavBar from '../../components/NavBar.vue'
import NumberTool from '../../components/NumberTool.vue'
</script>

<template>
  <NavBar :transparent="true" class="nav">
    <template v-slot:body>
      <view class="search">
        <view class="input" style="width: 436rpx;">
          <image mode="widthFix" class="icon" src="/static/image/navbar/search.png"/>
          <input placeholder="请输入场地名称/设备号/会员ID" />
        </view>
      </view>
    </template>
  </NavBar>
  <view class="bg">
    <view class="outer nav-padding">
      <view class="inner">
        <view class="tag">
          <view class="tag-item active">设备出币</view>
          <view class="tag-item">设备投币</view>
        </view>
        <view class="list">
          <view class="card">
            <view class="header">
              <view class="name">机器编号：101191（广州阳光都市13栋203）</view>
            </view>
            <view class="body">
              <view class="item">运营商：<b>张小红</b></view>
              <view class="item">网络：：<image mode="widthFix" class="signal" src="/static/image/icon_network3.png"/> </view>
              <view class="item">到期时间：<b>2026-06-18</b></view>
              <view class="item">运营状态：<b>运营</b></view>
            </view>
            <view class="footer">
              <view class="action">
                <view class="number">
                  数量<NumberTool />
                </view>
                <button class="btn primary">出币</button>
              </view>
            </view>
          </view>
          <view class="card">
            <view class="header">
              <view class="name">机器编号：101191（广州阳光都市13栋203）</view>
            </view>
            <view class="body">
              <view class="item">运营商：<b>张小红</b></view>
              <view class="item">网络：：<image mode="widthFix" class="signal" src="/static/image/icon_network3.png"/> </view>
              <view class="item">到期时间：<b>2026-06-18</b></view>
              <view class="item">运营状态：<b>运营</b></view>
            </view>
            <view class="footer">
              <view class="action">
                <view class="number">
                  数量<NumberTool />
                </view>
                <button class="btn primary">出币</button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang='scss'>
.bg {
  height: calc(546rpx + var(--status-bar-height));
  position: relative;
  background-image: url("/static/image/home/bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}
.outer {
  margin: 0 32rpx;
  z-index: 5;
  position: relative;
  .inner {
    background: #F2F2F2;
    position: absolute;
    margin-top: 68rpx;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    overflow: hidden;
  }
}
.tag {
  background: #f2f2f2;
  .tag-item {
    height: 100%;
    line-height: 88rpx;
    font-weight: bold;
    position: relative;
  }
  .active {
    background: #fff;
    color: #FF4638;
    border-radius: 0;
    &:after {
      content: '';
      position: absolute;
      width: 40rpx;
      height: 6rpx;
      background: #FF4638;
      border-radius: 3rpx 3rpx 3rpx 3rpx;
      bottom: 5rpx;
      left: calc(50% - 20rpx);
    }
  }
}
.list {
  padding: 44rpx 32rpx;
  background: #fff;
  .card {
    background: #FFFFFF;
    border-radius: 8rpx 8rpx 0 0;
    padding: 26rpx 0;
    &:not(:last-child) {
      box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
    }
  }
  .header {
    padding: 22rpx 0;
    .name {
      font-size: 28rpx;
      font-weight: bold;
      position: relative;
      margin-left: 26rpx;
    }
  }
  .body{
    padding: 24rpx 32rpx 34rpx;
    font-size: 24rpx;
    display: flex;
    flex-wrap: wrap;
    row-gap: 12rpx;
    color: #969699;
    b {
      color: #303030;
    }
    .item {
      width: 50%;
    }
    .signal {
      width: 28rpx;
    }
  }
  .footer {
    padding: 12rpx 32rpx;
    display: flex;
    .action {
      margin-left: 30rpx;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .btn {
        padding: 12rpx 52rpx;
      }
    }
    .number {
      display: flex;
      margin-right: 36rpx;
    }
  }
}
</style>